<template>
	<view class="container">
		<uv-navbar title="轮播图" bg-color="none" @leftClick="leftClick"></uv-navbar>
		<view class="swiper-box" v-if="swiperList.length > 0 && !isUp">
			<view class="swiper-item" v-for="item in swiperList" :key="item.id">
				<uv-image :src="item.imageUrl" radius="16rpx" :lazy-load="true" width="100%" height="320rpx"></uv-image>
				<view class="icon-trash" @click="remove(item.id)">
					<uv-icon name="trash" size="22"></uv-icon>
				</view>
			</view>
			<view class="button-fb" v-if="swiperList.length < 5" @click="uploadEwm">继续上传</view>
		</view>
		<view class="wx-box" v-else-if="!isUp" @click="uploadEwm">
			<image class="wx-box-image" src="/static/images/index/tu.png" mode="aspectFill"></image>
			<view class="text1">手机上传微信二维码</view>
			<view class="text2">支持png，jpg格式</view>
		</view>
		<view v-if="isUp">
			<view v-if="upLoading" class="wx-box">
				<image class="wx-box-image"
					src="http://jy-nfc.oss-cn-hangzhou.aliyuncs.com/2024/12/30/e44660bc8a8f4fe4a068dacb117a3958.png"
					mode="aspectFill"></image>
				<view class="text1">进度到达{{progress}}%</view>
				<view class="text2">正在上传中</view>
			</view>
			<view class="swiper-box" v-else>
				<view class="swiper-item">
					<uv-image :src="upswiper" radius="16rpx" :lazy-load="true" width="100%" height="320rpx"></uv-image>
					<view class="button-fb-box">
						<view class="button-fb-s" @click="uploadEwm">重新上传</view>
						<view class="button-fb" @click="onSubmit">保存提交</view>
					</view>
				</view>
			</view>
		</view>
		<uv-loading-page :loading="loading" loading-mode="semicircle" bgColor="rgba(0, 0, 0, 0.2)"></uv-loading-page>
	</view>
</template>

<script>
	const app = getApp();
	import {
		getCarouselImage,
		addCarouselImage,
		removeCarouselImage
	} from '@/common/api.js'
	import siteinfo from "siteinfo.js";
	export default {
		data() {
			return {
				loading: false,
				upLoading: false,
				isUp: false,
				showPassword: true,
				swiperList: [],
				upswiper: '',
				progress: 0
			};
		},
		onShow() {
			this.getDate()
		},

		methods: {
			leftClick() {
				app.navigateBack()
			},
			getDate() {
				getCarouselImage().then((res) => {
					this.swiperList = res.data
				})
			},
			uploadEwm() {
				let that = this
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.upLoading = true
						this.isUp = true
						const baseURL = siteinfo.siteroot;
						res.tempFilePaths.forEach(item => {
							const uploadTask = uni.uploadFile({
								url: baseURL + '/system/oss/upload', //上传接口地址
								filePath: item,
								name: 'file',
								success: (uploadFileRes) => {
									let data = JSON.parse(uploadFileRes.data)
									this.upswiper = data.data.url
									this.upLoading = false
									console.log('轮播上传结果：' , data.data.url);
								},
							});
							uploadTask.onProgressUpdate((res) => {
								this.progress = res.progress
							});
						})
					}
				})
			},
			onSubmit() {
				let that = this
				uni.showLoading({
					title: '正在提交',
					mask: true
				});
				addCarouselImage({
					imageUrl: that.upswiper
				}).then((res) => {
					that.getDate()
					that.isUp = false
					uni.hideLoading();
				}).catch((err) => {})
			},
			remove(id) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认删除？',
					success: function(res) {
						if (res.confirm) {
							removeCarouselImage({
								id,
							}).then((res) => {
								that.getDate()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		overflow: hidden;
		min-height: 100vh;
		width: 100vw;
		padding: 20rpx;
		padding-top: 216rpx;
		box-sizing: border-box;
		background: radial-gradient(128% 128% at 95% 0%, #D7CEFF 0%, #BBE1FF 62%, #FFFFFF 95%);


		.button-fb {
			width: 480rpx;
			height: 96rpx;
			background: linear-gradient(180deg, #886AE6 0%, #4635FF 99%);
			border-radius: 48rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
			margin: 0 auto;
			margin-top: 60rpx;
		}

		.swiper-box {
			width: 100%;

			.swiper-item {
				width: 100%;
				margin-bottom: 20rpx;
				position: relative;
			}

			.icon-trash {
				position: absolute;
				top: 20rpx;
				right: 22rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 52rpx;
				height: 55rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(157, 133, 236, 0.21);
				border-radius: 50%;
			}

		}

		.wx-box {
			min-height: 432rpx;
			background: rgba(255, 255, 255, 0.3);
			border-radius: 32rpx;
			border: 2rpx solid #FFFFFF;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.wx-box-image {
				width: 290rpx;
				height: 160rpx;
			}

			.text1 {
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
				line-height: 32rpx;
				text-align: center;
				margin-top: 34rpx;
				margin-bottom: 16rpx;
			}

			.text2 {
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 32rpx;
				text-align: center;
			}
		}

		.button-fb-box {
			position: fixed;
			bottom: 32rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;

			.button-fb {
				width: 326rpx;
				height: 96rpx;
				background: linear-gradient(180deg, #886AE6 0%, #4635FF 99%);
				border-radius: 48rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 96rpx;
				text-align: center;
				margin: 0;
			}

			.button-fb-s {
				width: 326rpx;
				height: 96rpx;
				border: 2rpx solid #4635FF;
				border-radius: 48rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #4635FF;
				line-height: 96rpx;
				text-align: center;
				margin-right: 20rpx;
			}
		}
	}
</style>